<template>
    <div class="label-wrap">
      <van-popup v-model="label_show" :close-on-click-overlay="false" class="labelPop-main">
        <div class="labelPop_dz">
          <div class="zltl_content">
            <van-radio-group 
              checked-color="#F20B22"
              v-model="checkValue"
              direction="vertical">
              <van-radio
                label-position="left"
                :name="1">
                <div class="wrap-item">
                  <span class="text">企业用户</span>
                  <span class="img">
                    <img src="https://wifenxiao.oss-cn-hangzhou.aliyuncs.com/h5-wfx/images/DZ/zltl/qykh.png"
                        alt="">
                  </span>
                </div>
              </van-radio>
            </van-radio-group>
            <van-radio-group 
              checked-color="#F20B22"
              v-model="checkValue"
            >
              <van-radio
                label-position="left"
                :name="2">
                <div class="wrap-item">
                  <span class="text">个人用户</span>
                  <span class="img">
                    <img src="https://wifenxiao.oss-cn-hangzhou.aliyuncs.com/h5-wfx/images/DZ/zltl/grkh.png"
                        alt="">
                  </span>
                </div>
              </van-radio>
            </van-radio-group>
          </div>
          <div class="input" v-if="checkValue == 1">
            <input v-model="name" type="text" placeholder="请填写企业名称">
          </div>
          <van-button class="submit_btn" :loading="loading" @click="closePanel">选择好了</van-button>
        </div>
      </van-popup>
    </div>
</template>

<script>
import Vue from 'vue'
import { RadioGroup, Radio } from 'vant'
Vue.use(Radio)
Vue.use(RadioGroup)
import { addUserIdentity } from '@/api/dz/dzApi'
export default {
  name: 'index',
  props: {
    label_show: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      loading: false,
      checkValue: 1,
      name: ''
    }
  },
  methods: {
    closePanel() {
      if (!this.checkValue) {
        this.$Error('请选择类型')
        return false
      }
      if (this.checkValue == 1) {
        if (!this.name) {
          this.$Error('请填写企业名称')
          return false
        }
      }
      this.loading = true
      addUserIdentity({ id: this.checkValue, name: this.name }).then(res => {
        this.loading = false
        if (res.status == 1) {
          this.$Error('选择成功')
          this.label_show = false
        } else {
          this.$Error(res.msg + '请重新选择')
          this.$emit('login')
        }
      })
    }
  }
}
</script>

<style lang="scss">
  .labelPop-main{
    background: transparent;
    .labelPop_dz{
      .zltl_content {
        box-sizing: border-box;
        padding: 0 36px;
        width: 100vw;
        // height: 360px;
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        margin-bottom: 100px;
        .wrap-item {
          line-height: 90px;
          font-weight: 500;
          height: 100%;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          margin-bottom: 50px;
          .text {
            font-size: 35px;
            font-weight: 600;
            color: #333;
          }
          img {
            width: 128px;
            height: 128px;
          }
        }
      }
    }
    .van-radio {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: center;
      width: 100%;
      height: 100%;
    }
    .van-radio__label.van-radio__label--left {
      width: 100%;
      margin-right: 0;
    }
    .van-radio-group {
      background: white;
      width: 316px;
      height: 380px;
      border-radius: 12px;
    }
    .submit_btn {
      width: 700px;
      height: 90px;
      background: rgba(246,36,48,1);
      border-radius: 46px;
      font-size: 32px;
      font-weight: 500;
      color: rgba(255,255,255,1);
      text-align: center;
      line-height: 90px;
      margin-left: 25px;
    }
    .close {
      text-align: center;
      margin-top: 70px;
      img {
        width: 70px;
      }
    }
    input {
      display: inline-block;
      box-sizing: border-box;
      width: 660px;
      height: 80px;
      font-size: 28px;
      padding: 15px 70px;
      margin: 40px;
      background: #fff;
    }
  }
</style>
